<template>
    <div v-html="dynComponent">
    </div>
</template>

<script>
export default {
    name: "rx-render",
    props: {
        record: {},
        index: {},
        col: {},
    },
    computed: {
        dynComponent() {
            let html = JSON.parse(this.col.renderConf).html;
            if (html) {
                return this.parseContent(html, this.record).innerHTML;
            } else {
                return this.record[this.col.field]
            }
        }
    },
    created(){

    },
    methods: {
        parseContent(html, record) {
            var div = document.createElement("div");
            div.innerHTML = html;

            //处理v-if
            var obj = div.querySelectorAll("[v-if]");
            var str;

            if (!obj || obj.length == 0) {
                var rtn = this.getContent(html, record);
                div.innerHTML = rtn;
                return div;
            } else {
                if (obj.length > 0) {
                    for (var i = 0, l = obj.length; i < l; i++) {
                        var o = obj[i];
                        str = o.getAttribute("v-if");
                        if (this.isInclude(str, record)) {
                            o.removeAttribute("v-if");
                            o.innerHTML = this.getContent(o.getInnerHTML(), record);
                            this.remove(div, 1);
                            return div;
                        } else {
                            div.removeChild(o);
                        }
                    }
                }
            }

            //处理v-else-if
            obj = div.querySelectorAll("[v-else-if]");
            if (obj && obj.length > 0) {
                for (var i = 0, l = obj.length; i < l; i++) {
                    var o = obj[i];
                    str = o.getAttribute("v-else-if");
                    if (this.isInclude(str, record)) {
                        o.removeAttribute("v-else-if");
                        o.innerHTML = this.getContent(o.getInnerHTML(), record);
                        this.remove(div, 2);
                        return div;
                    } else {
                        div.removeChild(o);
                    }
                }
            }

            ////处理v-else
            obj = div.querySelector("[v-else]");
            if (obj) {
                obj.removeAttribute("v-else");
                obj.innerHTML = this.getContent(obj.getInnerHTML(), record);
            }
            return div;


        },
        isInclude(str) {
            var rtn = new Function('return ' + str)();
            return rtn;
        },
        getContent(str,record) {
            str = str.replace(/\{\{(.*?)\}\}/mg, function (arg, arg1) {
                if(!arg1.includes('return')){
                    arg1 = 'return ' + arg1 ;
                }
                let fn = new Function("row", arg1);
                let rtn = fn(record);
                return rtn
            })
            return str;
        },
        remove(div, type) {
            var obj;
            if (type == 1) {
                obj = div.querySelectorAll("[v-if]");
                if (obj && obj.length > 0) {
                    for (var i = 0, l = obj.length; i < l; i++) {
                        div.removeChild(obj[i]);
                    }
                }

                obj = div.querySelectorAll("[v-else-if]");
                if (obj && obj.length > 0) {
                    for (var i = 0, l = obj.length; i < l; i++) {
                        div.removeChild(obj[i]);
                    }
                }

                obj = div.querySelector("[v-else]");
                if (obj) {
                    div.removeChild(obj);
                }

            } else {
                obj = div.querySelectorAll("[v-else-if]");
                if (obj && obj.length > 0) {
                    for (var i = 0, l = obj.length; i < l; i++) {
                        div.removeChild(obj[i]);
                    }
                }

            }
        }
    },
}
</script>
